import React from 'react';
import {Scatter } from '@ant-design/plots';

class DownCol extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      plotData:[],
    }
  }

  componentDidMount() {
    this.getAppInfo();
  }

  getAppInfo=()=>{
    const url=`http://1.94.134.166:8805/appUseInfo/state?beginDate=2024-01-01&endDate=2024-11-01&stateType=ByMonth`
    fetch(url,
      {
        method:'GET',
        headers:{
          Authorization:localStorage.getItem('Authorization'),
        },
      })
      .then((response) => response.json())
      .then((data)=>{

        let arr=[];
        for(let i=0;i<data.data.length;i++){
          if(data.data[i].stateMonth===9)
          {
            arr.push(data.data[i]);
          }
        }
        this.setState({plotData:arr});
        console.log(arr);
      })
  }

  render() {
    const config = {
      data: this.state.plotData,
      xField: 'appName',
      yField: 'useTime',
      colorField: 'gender',
    };
    return (
      <>
        <div>
          <div>散点图</div>
          <Scatter {...config} />
        </div>
      </>
    );

  }
}



export default DownCol;
